import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import app from './App.css'
import {withStyles} from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import {otherMailFolderListItems} from './tileData';

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';
import Collapse from '@material-ui/core/Collapse';

import Py11 from './components/Py1_1';
import Py12 from './components/Py1_2';
import Py13 from './components/Py1_3';
import Py14 from './components/Py1_4';
import Py15 from './components/Py1_5';
import Py16 from './components/Py1_6';
import Py21 from './components/Py2_1';
import Py22 from './components/Py2_2';
import Py23 from './components/Py2_3';
import Py24 from './components/Py2_4';
import Py25 from './components/Py2_5';
import Py26 from './components/Py2_6';
import Py27 from './components/Py2_7';
import Py28 from './components/Py2_8';
import {Route, NavLink, HashRouter} from "react-router-dom";

const drawerWidth = 240;

const styles = theme => ({

    button: {
        margin: theme.spacing.unit
    },
    root: {
        flexGrow: 1,
        zIndex: 1,
        overflow: 'hidden',
        position: 'relative',
        display: 'flex'
    },
    mulu: {
        marginLeft: '15px'
    },
    nested: {
        paddingLeft: theme.spacing.unit * 4
    },
    nested2: {
        paddingLeft: theme.spacing.unit * 8
    },
    appBar: {
        position: 'fixed',
        top: 0,
        zIndex: theme.zIndex.drawer + 1,
        transition: theme
            .transitions
            .create([
                'width', 'margin'
            ], {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.leavingScreen
            })
    },
    appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme
            .transitions
            .create([
                'width', 'margin'
            ], {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.enteringScreen
            })
    },
    menuButton: {
        marginLeft: 12,
        marginRight: 36
    },
    hide: {
        display: 'none'
    },
    drawerPaper: {
        position: 'fixed',
        left: 0,
        whiteSpace: 'nowrap',
        width: drawerWidth,
        transition: theme
            .transitions
            .create('width', {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.enteringScreen
            })
    },
    drawerPaperClose: {
        overflowX: 'hidden',
        transition: theme
            .transitions
            .create('width', {
                easing: theme.transitions.easing.sharp,
                duration: theme.transitions.duration.leavingScreen
            }),
        width: theme.spacing.unit * 7,
        [
            theme
                .breakpoints
                .up('sm')
        ]: {
            width: theme.spacing.unit * 9
        }
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: '0 8px',
        ...theme.mixins.toolbar
    },
    padingwrap: {
        padding: "0 0px"
    },
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing.unit * 1,
        maxWidth: '900px',
    },
});
const contentstyle = {
    marginLeft: '240px'
}
class MiniDrawer extends React.Component {

    state = {
        open: true,
        openlist: true,
        openlist2: true,
        openlist22: true,
        maxWidths: true,
        contents:contentstyle
    };

    handleDrawerOpen = () => {
        this.setState({open: true});
        this.setState({ maxWidths: true})

    };

    handleDrawerClose = () => {
        this.setState({open: false});
        this.setState({ maxWidths: false})

    };
    handleClick = () => {
        this.setState({
            openlist: !this.state.openlist
        });
    };
    handleClick2 = () => {
        this.setState({
            openlist2: !this.state.openlist2
        });
    };
    handleClick22 = () => {
        this.setState({
            openlist22: !this.state.openlist22
        });
    };
    render() {
        const {classes, theme} = this.props;

        return (
            <HashRouter>
                <div className={classes.root}>
                    <AppBar
                        position="absolute"
                        className={classNames(classes.appBar, this.state.open && classes.appBarShift)}>

                        <Toolbar disableGutters={!this.state.open}>
                            <IconButton
                                color="inherit"
                                aria-label="open drawer"
                                onClick={this.handleDrawerOpen}
                                className={classNames(classes.menuButton, this.state.open && classes.hide)}>
                                <MenuIcon/>
                            </IconButton>
                            <Typography variant="title" color="inherit" noWrap>
                                Mini variant drawer
                            </Typography>
                        </Toolbar>
                    </AppBar>
                    <Drawer
                        variant="permanent"
                        classes={{
                        paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose)
                    }}
                        open={this.state.open}>
                        <div className={classes.toolbar}>
                            <div className={classes.mulu}>目录</div>
                            <IconButton onClick={this.handleDrawerClose}>
                                {theme.direction === 'rtl'
                                    ? <ChevronRightIcon/>
                                    : <ChevronLeftIcon/>}
                            </IconButton>
                        </div>
                        <Divider/>
                        <List>
                            <ListItem button onClick={this.handleClick}>
                                <ListItemIcon>
                                    <InboxIcon/>
                                </ListItemIcon>
                                <ListItemText inset primary="Python爬虫"/> {this.state.openlist
                                    ? <ExpandLess/>
                                    : <ExpandMore/>}
                            </ListItem>
                            <Collapse in={this.state.openlist} timeout="auto" unmountOnExit>
                                <List component="div" disablePadding>
                                    <ListItem button onClick={this.handleClick2} className={classes.nested}>
                                        <ListItemIcon>
                                            <InboxIcon/>
                                        </ListItemIcon>
                                        <ListItemText inset primary="创建爬虫"/> {this.state.openlist2
                                            ? <ExpandLess/>
                                            : <ExpandMore/>}
                                    </ListItem>
                                    <Collapse in={this.state.openlist2} timeout="auto" unmountOnExit>
                                        <List component="div" disablePadding>
                                            <NavLink to="/">
                                                <ListItem button className={classes.nested2}>
                                                    <ListItemIcon>
                                                        <StarBorder/>
                                                    </ListItemIcon>
                                                    <ListItemText inset primary="初见网络爬虫"/>
                                                </ListItem>
                                            </NavLink>
                                            <NavLink to="/py1_2">
                                                <ListItem button className={classes.nested2}>
                                                    <ListItemIcon>
                                                        <StarBorder/>
                                                    </ListItemIcon>
                                                    <ListItemText inset primary="复杂HTML解析"/>
                                                </ListItem>
                                            </NavLink>
                                            <NavLink to="/py1_3">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="开始采集"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py1_4">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="使用API"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py1_5">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="存储数据"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py1_6">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="读取文档"/>
                                            </ListItem>
                                            </NavLink>
                                        </List>
                                    </Collapse>
                                </List>
                            </Collapse>
                            <Collapse in={this.state.openlist} timeout="auto" unmountOnExit>
                                <List component="div" disablePadding>
                                    <ListItem button onClick={this.handleClick22} className={classes.nested}>
                                        <ListItemIcon>
                                            <InboxIcon/>
                                        </ListItemIcon>
                                        <ListItemText inset primary="高级数据采集"/> {this.state.openlist22
                                            ? <ExpandLess/>
                                            : <ExpandMore/>}
                                    </ListItem>
                                    <Collapse in={this.state.openlist22} timeout="auto" unmountOnExit>
                                        <List component="div" disablePadding>
                                        <NavLink to="/py2_1">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="数据清洗"/>
                                            </ListItem>
                                            </NavLink>
          
                                            <NavLink to="/py2_2">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="自然语言处理"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py2_3">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="穿越网页表单与登录窗口进行采集"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py2_4">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="采集JavaScript"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py2_5">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="图像识别与文字处理"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py2_6">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="避开采集陷阱"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py2_7">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="用爬虫测试网站"/>
                                            </ListItem>
                                            </NavLink>
                                            <NavLink to="/py2_8">
                                            <ListItem button className={classes.nested2}>
                                                <ListItemIcon>
                                                    <StarBorder/>
                                                </ListItemIcon>
                                                <ListItemText inset primary="远程采集"/>
                                            </ListItem>
                                            </NavLink>
                                        </List>
                                    </Collapse>
                                </List>
                            </Collapse>
                        </List>
                        <Divider/>
                        <List>
                            <ListItem button onClick={this.handleClick}>
                                <ListItemIcon>
                                    <InboxIcon/>
                                </ListItemIcon>
                                <ListItemText inset primary="Inbox"/> {this.state.openlist
                                    ? <ExpandLess/>
                                    : <ExpandMore/>}
                            </ListItem>
                            <Collapse in={this.state.openlist} timeout="auto" unmountOnExit>
                                <List component="div" disablePadding>
                                    <ListItem button className={classes.nested}>
                                        <ListItemIcon>
                                            <StarBorder/>
                                        </ListItemIcon>
                                        <ListItemText inset primary="Starred"/>
                                    </ListItem>
                                </List>
                            </Collapse>
                        </List>
                        <Divider/>
                        <List>{otherMailFolderListItems}</List>
                    </Drawer>
                    <main className={classes.content}>
                        <div className={classes.toolbar}/>
                        <div className={classes.padingwrap} style={this.state.maxWidths
                                ? this.state.contents
                                : null}>
                            <Route exact path='/' component={Py11}/>
                            <Route path='/py1_1' component={Py11}/>
                            <Route path='/py1_2' component={Py12}/>
                            <Route path='/py1_3' component={Py13}/>
                            <Route path='/py1_4' component={Py14}/>
                            <Route path='/py1_5' component={Py15}/>
                            <Route path='/py1_6' component={Py16}/>
                            <Route path='/py2_1' component={Py21}/>
                            <Route path='/py2_2' component={Py22}/>
                            <Route path='/py2_3' component={Py23}/>
                            <Route path='/py2_4' component={Py24}/>
                            <Route path='/py2_5' component={Py25}/>
                            <Route path='/py2_6' component={Py26}/>
                            <Route path='/py2_7' component={Py27}/>
                            <Route path='/py2_8' component={Py28}/>
                        </div>
                    </main>
                </div>
            </HashRouter>
        );
    }
}

MiniDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired
};

export default withStyles(styles, {withTheme: true})(MiniDrawer);